<template>
  <view class="app">
    <view class="often-use">
      <view class="title">常用功能</view>
      <view class="box">
        <view class="b-item" @tap="nav(`/pages/h5/index?url=${h5Apply}&q=${JSON.stringify({ type: 2, token
        })}`,'',{isReuqireLogin:true})">
          <image class="b-item_top img" :src="'icon/region.png'|prefixOssUrl" />
          <text class="b-item_btm">区域查询</text>
        </view>
        <view class="b-item" @tap="navMa('wxdd954481deb028cd', '/pages/index/index', {type: 2, token})">
          <image class="b-item_top img" :src="'icon/live.png' | prefixOssUrl" />
          <text class="b-item_btm">直播</text>
        </view>
        <view class="b-item" @tap="nav(`/pages/h5/index?url=${h5TraceQuery}`)">
          <image class="b-item_top img" :src="'icon/code-search.png' | prefixOssUrl" />
          <text class="b-item_btm">溯源查询</text>
        </view>
        <view class="b-item" @tap="nav('/subpackage/axq/pages/material/index')">
          <image class="b-item_top img" :src="'icon/material.png'|prefixOssUrl" />
          <text class="b-item_btm">素材下载</text>
        </view>
      </view>
    </view>
    <view class="about">
      <view class="title">关于公司</view>
      <view class="box">
        <view class="b-item" @tap="nav('/subpackage/axq/pages/introduce/index')">
          <image class="b-item_top img" :src="'icon/introduction.png'|prefixOssUrl" />
          <text class="b-item_btm">公司介绍</text>
        </view>
        <view class="b-item" @tap="nav('/subpackage/axq/pages/notice/list')">
          <image class="b-item_top img" :src="'icon/notice.png'|prefixOssUrl" />
          <text class="b-item_btm">公司通知</text>
        </view>
        <view class="b-item" @tap="nav('/subpackage/axq/pages/article/list')">
          <image class="b-item_top img" :src="'icon/media.png' | prefixOssUrl" />
          <text class="b-item_btm">媒体报道</text>
        </view>
        <view class="b-item" @tap="nav('/subpackage/axq/pages/develop-timeline/index')">
          <image class="b-item_top img" :src="'icon/development.png' | prefixOssUrl" />
          <text class="b-item_btm">发展历程</text>
        </view>
<!--        <view class="b-item" @tap="nav('/subpackage/axq/pages/video/index')">
          <image class="b-item_top img" :src="'icon/videos.png'  | prefixOssUrl" />
          <text class="b-item_btm">公司视频</text>
        </view> -->
      </view>
    </view>
    <view v-if="!isNoTipShow && token" class="a-tip" @tap="colseTipShow">
      <image :src="'background-image/region-search-tip.png' | prefixOssUrl" alt="" />
    </view>
  </view>
</template>

<script>
  import {
    appConfig
  } from '@/config/app';
  import {
    localStorage
  } from '@/utils/localStorage';
  export default {
    components: {},
    data() {
      return {
        isNoTipShow: false,
        h5TraceQuery: appConfig.h5.traceQuery,
        h5Apply: appConfig.h5.apply,
        token: localStorage.getToken()
      }
    },
    onShow() {
      this.token = localStorage.getToken();
    },
    methods: {
      colseTipShow() {
        this.isNoTipShow = true
        uni.setStorageSync('isRegionTipShow', 'Y');
      }
    },
    created() {
      this.isNoTipShow = !!uni.getStorageSync('isRegionTipShow') ;
    }
  }
</script>

<style lang="less">
  page {
    background-color: #f8f6f9;

    .app {

      .often-use,
      .about {
        margin-top: 35rpx;

        .title {
          height: 35rpx;
          padding-left: 10rpx;
          margin-top: 20rpx;
          margin-left: 30rpx;
          font-size: 38rpx;
          font-weight: bold;
          color: #333333;
          line-height: 30rpx;
          border-left: 8rpx solid #db177b;
        }

        .box {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          width: 100%;
          padding: 20rpx 0;
          margin-top: 20rpx;
          background-color: #fff;

          .b-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 187rpx;
            height: 100%;
            margin: 10rpx 0;

            &_top {
              width: 66rpx;
              height: 66rpx;
              margin-bottom: 10rpx;
            }

            &_btm {
              font-size: 28rpx;
              color: #666666;
            }
          }
        }
      }

      .a-tip {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 99;

        image {
          z-index: 99;
          width: 100%;
          height: 100%;
        }

      }
    }
  }
</style>